<!DOCTYPE html>
<html>

<head>
  <title>CSS 餐厅 - 更直观地学习CSS选择器！</title>
  <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/levels.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/restaurant.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jquery.mCustomScrollbar.min.js"></script>

  <link rel="icon" type="image/png" href="favicon.png">
  <link href='https://fonts.googleapis.com/css?family=Exo+2:200,400,600,400italic,600italic' rel='stylesheet'>
  <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
  <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css" media="screen" title="no title"
    charset="utf-8">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">

  <meta charset="UTF-8">
  <meta property="og:url" content="http://cssdiner.com" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="CSS 餐厅" />
  <meta property="og:description" content="一个有趣的游戏，帮助您学习和练习 CSS 选择器。" />
  <meta property="og:image" content="https://flukeout.github.io/images/fb-share.jpg" />
</head>

<body>
  <div class="left-col">

    <header>
      CSS 餐厅
      <div class="logo">
        <plate>
          <apple />
        </plate>
      </div>
      <!-- <span class="share-menu">
          分享
          <a class="share-twitter" type="twitter" href="#"></a>
          <a class="share-facebook" type="facebook" href="#"></a>
          <a class="share-email" type="email" href="#"></a>
        </span> -->
    </header>

    <h2 class="order"></h2>

    <div class="note">
      <h3>别担心，你一定可以的！</h3>
      <p>
        你将学习 CSS 选择器！
        选择器是用于选择要应用样式的元素的方法。
      </p>

      <h4>示例 1 - CSS 规则</h4>

      <pre>
p {
   margin-bottom: 12px;
}
</pre>

      <p>
        在这里，"p" 是选择器（选择所有 &lt;p&gt; 元素），并应用 `margin-bottom` 样式。
      </p>
      <p>
        要玩这个游戏，请在下面的编辑器中输入一个 CSS 选择器，选择餐桌上正确的项目。如果答对了，你将进入下一关。
      </p>
      <p>
        将鼠标悬停在餐桌上的物品上可以查看它们的 HTML 标记。
      </p>
      <p>
        需要帮助？查看右侧的选择器提示！ &rarr;
      </p>
      <a class="note-toggle" href="#">好的，我明白了！</a>
    </div>

    <a class="note-toggle" href="#">如何开始这个游戏？</a>

    <div class="game-wrapper">
      <div class="table-wrapper">
        <div class="table-surface"></div>
        <div class="nametags"></div>
        <div class="table"></div>
      </div>
      <div class="table-edge">
        <div class="table-leg"></div>
        <div class="table-leg"></div>
      </div>
    </div>

    <div class="editor">

      <div class="editor-pane">
        <div class="input-header">
          <div class="file-name">style.css</div> CSS 编辑器
        </div>
        <div class="file-window css-view">
          <div class="line-numbers">
            1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20
          </div>
          <input class="input-strobe" type="text" placeholder="输入 CSS 选择器" /><span class="plus">+</span>
          <div class="enter-button">回车</div>
          <div>
            {<br />
            /* 样式写在这里 */<br />
            }
          </div>
          <div class="help">
            <br />
            /* <br />
            输入数字跳转到关卡。<br />
            例如 &rarr; 输入 "5" 跳转到第 5 关 <br />*/
          </div>
        </div>
      </div>

      <div class="editor-pane html-view">
        <div class="input-header">
          <div class="file-name">table.html</div>
          HTML 查看器
        </div>
        <div class="file-window">
          <div class="line-numbers">
            1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20
          </div>
          <div class="markup"></div>
        </div>
      </div>
    </div>

    <div class="what-is-this">
      <p>
        作者：@flukeout
      </p>
      <p>
        有反馈或问题？请在 Github 仓库中提交问题。
      </p>
    </div>

    <div class="helper"><!-- 这是悬浮在桌面元素上的弹出窗口 --></div>

  </div><!-- /left-col -->

  <div class="right-col">

    <div class="help-wrapper">

      <h1 class="level-header">
        <span class="level-text"></span>
        <span class="checkmark"></span>
      </h1>

      <div class="level-nav">
        <a class="previous" href="#"></a>
        <a class="next" href="#"></a>
      </div>

      <div class="level-progress">
        <div class="progress"></div>
      </div>

      <div class="display-help">
        <h3 class="selector-name"></h3>
        <h2 class="title"></h2>
        <h3 class="syntax"></h3>
        <div class="hint"></div>
        <h4 class="examples-title">示例</h4>
        <div class="examples"></div>
      </div>
    </div>

    <div class="level-menu">
      <h2>选择一个关卡</h2>
      <div class="levels"><!-- 插入关卡链接 --></div>
      <a class="reset-progress" href="#">重置进度</a>
    </div>

    <div class="level-menu-toggle-wrapper">
      <div class="level-menu-toggle"></div>
    </div>

  </div><!-- /right-col -->

</body>

</html>